@area-theme: "水果", "水果", "水果", "游戏", "游戏", "游戏", "", "", "", "", "", "";
@hall-theme: "殷桃", "芒果", "草莓", "植物大战僵尸", "英雄联盟", "超级马里奥", "", "", "", "";

.theme-background-loop (@i) when (@i > 0) {
  @folder: extract(@area-theme, @i);
  @bg: %("../static/themes2/排行榜/%s/bg.png", @folder);
  .theme@{i} > .bg_theme@{i} {
    background-image: url(@bg) !important;
  }

  @file: extract(@hall-theme, @i);
  .header-photo-loop(@j) when (@j > 0) {
    @photo: %("../static/themes2/排行榜/%s/%s/%d.png", @folder, @file, @j);
    .theme@{i} > .header-bar > .header > .photo@{j}, .theme@{i} > .rank-bar > .rank-bar-table > .rank > .photo@{j} {
      background-image: url(@photo);
    }
    .header-photo-loop(@j - 1);
  }
  .header-photo-loop (10);
  .theme-background-loop(@i - 1);
}

.theme-background-loop (6);

@background-url: %("../static/themes2/排行榜/%s/bg.png", extract(@area-theme, 1));

.theme_all, .theme_all {
  .bg {
    background-image: url(@background-url);
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
  }

  .color-bg {
    background-color: #EED538 !important;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2000%;
  }

  .header-bar {
    background: url('../static/themes2/排行榜/stage.png');
    background-size: 100% 80%;
    background-repeat: no-repeat;
    background-position-x: 33%;
    background-position-y: 183%;
    width: 60%;
    height: 53%;
    position: absolute;
    left: 20%;
    top: 0%;
    text-align: center;

    .header {
      //border: #2c3e50 1px solid;
      display: none;
      position: absolute;
      background-repeat: no-repeat;
      background-image: url("../static/themes2/排行榜/皇冠1.png");
      background-size: 43px 39px;
      background-position: 34px 4px;

      .photo {
        background-repeat: no-repeat;
        background-position: 0 0;
        width: 74px;
        height: 74px;
        background-size: cover;
        margin-left: 52px;
        margin-top: 19px;

        border-radius: 50%;
        border-top-width: 1px;
        border-top-style: solid;
        border-right-width: 1px;
        border-right-style: solid;
        border-left-width: 1px;
        border-left-style: solid;
        border-bottom-width: 1px;
        border-bottom-style: solid;
      }

      .photo:nth-child(1) {
        border-color: #F8D000;
      }

      .photo:nth-child(2) {
        border-color: #C6D3E3;
      }

      .photo:nth-child(3) {
        border-color: #F78931;
      }

      .name {
        margin-bottom: 0px;
        text-align: center;
        margin: 0% 20%;
      }

      .score {
        width: 100%;
        text-align: right !important;
        background: url("../static/themes2/排行榜/coin.png") no-repeat 30px 0px;
        background-size: 30px 30px;
      }
    }

    .header:nth-child(1), .header:nth-child(2), .header:nth-child(3) {
      display: inline;
    }

    .header:nth-child(1) {
      top: 4%;
      left: 34%;
      background-image: url("../static/themes2/排行榜/皇冠1.png");

      .name {
        width: 100%;
        margin-top: 16%;
        text-align: center;
      }

    }

    .header:nth-child(2) {
      top: 16%;
      left: 1%;
      background-image: url("../static/themes2/排行榜/皇冠2.png");

      .name {
        width: 100%;
        margin-top: 8%;
        text-align: center;
      }

      .score {
        width: 100%;
        margin: auto;
        text-align: center;
      }
    }

    .header:nth-child(3) {
      top: 22%;
      left: 69%;
      background-image: url("../static/themes2/排行榜/皇冠3.png");

      .name {
        width: 100%;
        margin-top: 5%;
        text-align: center;
      }

      .score {
        width: 100%;
        margin: auto;
        text-align: center;
      }
    }
  }

  .rank-bar {
    border: #CCBE67 1px solid;
    background-color: #FFFFFF;
    width: 83%;
    height: 100%;
    position: absolute;
    left: 9%;
    top: 42%;
    border-radius: 10px;

    .rank-bar-title {
      background: url("../static/themes2/排行榜/标题.png") no-repeat;
      background-size: 41% 60%;
      background-position: 48% 40%;
      margin: auto;
      width: 100%;
      height: 9%;
    }

    .rank-bar-table {
      //border: #CCBE67 1px solid;
      width: 100%;
      height: 91%;

      .rank:nth-child(even) {
        background-color: #FDF7EB
      }

      .rank:nth-child(odd) {
        background-color: #EDE5D3
      }

      .rank {
        //border: #CCBE67 1px solid;
        height: 10%;
        width: 100%;
        overflow: hidden;

        .small-diamond {
          float: left;
          width: 52px;
          margin-left: 16%;
          margin-right: 10%;
          height: 57px;
          background-image: url("../static/themes2/排行榜/diamond/diamond_no.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 40px;
        }

        @iterations: 3;
        .span-loop (@i) when (@i > 0) {
          .small-diamond-@{i} {
            background-image: url("../static/themes2/排行榜/diamond/diamond@{i}.png");
          }
          .span-loop(@i - 1);
        }
        .span-loop (@iterations);


        .photo {
          border: #CCBE67 1px solid;
          border-radius: 50%;
          float: left;
          //margin-top: 3px;
          width: 30px;
          height: 30px;
          margin-top: 10px;
          line-height: 30px;
          background-size: cover;
        }

        .name {
          float: left;
          width: 30%;
          text-align: center;
          height: 40px;
          line-height: 40px;
        }

        .score {
          float: left;
          width: 15%;
          text-align: center;
          height: 40px;
          line-height: 40px;
        }

        .color-bar {
          float: left;
          background-color: #E0AE3B;
          margin-top: 10px;
          height: 10px;
        }
      }
    }
  }
}

//body {
//  overflow-y: scroll;
//  overflow-x: hidden;
//  height: 100%;
//  width: 100%;
//}
